<script setup>
import { onMounted } from 'vue'

import { Publics } from '@/stores/public.js'
import { storeToRefs } from 'pinia'

const publics = Publics()
const { cascader, place, aqis, loc, remark, curAqi, show, showName } = storeToRefs(publics)

const props = {
  text: 'gname',
  value: 'id',
  children: 'children'
}

const onFinish = (selectedOptions) => {
  const name = selectedOptions.selectedOptions.map((item) => item.gname).join('/')
  const ids = selectedOptions.selectedOptions.map((item) => item.id)
  console.log(name)
  console.log(ids)
  publics.onFinish(name, ids)
}

const handleBackClick = () => {
  // 跳转回上一页
  publics.goback()
}

onMounted(() => {
  publics.loadData()
})
</script>

<template>
  <div class="public">
    <header class="header">
      <button class="back-button" @click="handleBackClick">返回</button>
      <h1 class="header-title">公众监督上报</h1>
    </header>
    <div class="divider"></div>
    <el-main>
      <el-form label-width="80px">
        <el-form-item label="地区">
          <van-field
            v-model="showName"
            is-link
            readonly
            placeholder="请选择所在地区"
            @click="publics.onShow()"
          />
          <van-popup v-model:show="show" round position="bottom">
            <van-cascader
              title="请选择所在地区"
              :options="cascader"
              :field-names="props"
              @close="publics.onClose()"
              @finish="onFinish"
            />
          </van-popup>
        </el-form-item>
        <el-form-item label="AQI">
          <el-select
            v-model="curAqi"
            placeholder="预估污染水平"
            style="width: 240px"
            popper-class="aqi"
          >
            <el-option v-for="item in aqis" :key="item.id" :label="item.expln" :value="item.id">
              <span style="float: left">{{ item.id }}</span>
              <el-tag
                :style="{ backgroundColor: item.color }"
                style="color: white; font-weight: bold"
                >{{ item.expln }}</el-tag
              >
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.aqiExplain }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详细地点">
          <el-input
            v-model="loc"
            maxlength="50"
            style="width: 240px"
            placeholder="请输入具体地点"
            show-word-limit
            type="textarea"
          />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="remark"
            maxlength="40"
            style="width: 240px"
            placeholder="说些什么"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item height="50px">
          <el-button @click="publics.cancel"> cancel </el-button>
          <el-button @click="publics.done"> done </el-button>
        </el-form-item>
      </el-form>
    </el-main>
    \
  </div>
</template>

<style lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #007bff;
}

.header-title {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 20px;
}
.aqi {
  background-color: #f1f5f9;
}

.public {
  width: 410px;
  height: 640px;
}
</style>
